$--color-primary: #1890ff;
.home-container{
  padding: 15px;
  .panel{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 20px;
    margin-bottom: 20px;
    &:last-child{
      margin-bottom: 0;
    }
    .list{
      margin-top: 10px;
      display: flex;
      flex-flow: row wrap;
      .item{
        background: #f3f3f3;
        padding: 20px;
        width: calc(20% - 20px);
        border-radius: 10px;
        margin:0 20px 20px 0;
        .title{
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          .view{
            float: right;
            border: solid 1px $--color-primary;
            color: $--color-primary;
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: normal;
            cursor: pointer;
          }
        }
        .content{
          font-size: 12px;
          color: #666;
          margin-top: 20px;
          .sub-item{
            display: flex;
            margin-top: 10px;
            .name{
              width: 130px;
              color: #000;
            }
            .num{
              flex: 1;
              display: flex;
              justify-content: flex-end;
            }
          }

        }

      }
    }
    .chart{
      height: 400px;
    }
  }
}
